
document.addEventListener("DOMContentLoaded", function() {
    var myChart = echarts.init(document.getElementById('con2'));

    function fetchDataAndUpdateChart() {
        fetch('/api/get-anomaly-data/')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        x: 'left',
                        orient: 'vertical',
                        data: data.categories,
                        textStyle: {
                            color: "#0089f3"
                        }
                    },
                    calculable: true,
                    polar: [
                        {
                            indicator: [
                                { text: '类别1', max: 100 },
                                { text: '类别2', max: 100 },
								{ text: '类别3', max: 100 },
                                { text: '类别4', max: 100 },
								{ text: '类别5', max: 100 },
                            ],
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ['rgba(250,0,250,0)', 'rgba(250,0,250,0)', 'rgba(250,0,250,0)']
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#08ffff',
                                    width: 2,
                                    type: 'solid'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    width: 2,
                                    color: '#165ec5'
                                }
                            },
                            name: {
                                textStyle: { color: '#0193f6' }
                            },
                            radius: 100
                        }
                    ],
                    series: [
                        {
                            name: '异常类别',
                            type: 'radar',
                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        type: 'default'
                                    }
                                }
                            },
                            data: [
                                {
                                    value: data.caseno01,
                                    name: data.categories[0],
                                    itemStyle: {
                                        normal: {
                                            color: function(params) {
                                                var value = params.data
                                                return isNaN(value)
                                                    ? undefined
                                                    : (value >= 90 ? '#08fdfe' : '#fdd32')
                                            }
                                        }
                                    }
                                },
                                {
                                    value: data.caseno02,
                                    name: data.categories[1],
                                    itemStyle: {
                                        normal: {
                                            color: function(params) {
                                                var value = params.data
                                                return isNaN(value)
                                                    ? undefined
                                                    : (value >= 100 ? 'yellow' : 'blue')
                                            }
                                        }
                                    }
                                },
                                {
                                    value: data.caseno03,
                                    name: data.categories[2]
                                }
                            ]
                        }
                    ]
                };

                myChart.setOption(option);
                window.onresize = myChart.resize;
            })
            .catch(error => console.error('Error fetching data:', error));
    }

    // 初次加载时调用一次函数获取并更新数据
    fetchDataAndUpdateChart();

    // 如果需要定时更新数据，可以使用以下代码
    setInterval(fetchDataAndUpdateChart, 10000);  // 每分钟更新一次
});

document.addEventListener("DOMContentLoaded", function() {
	var myChart = echarts.init(document.getElementById('left02'));

	function fetchDataAndUpdateChart() {
		fetch('/api/get-device-data/')
			.then(response => {
				if (!response.ok) {
					throw new Error('Network response was not ok ' + response.statusText);
				}
				return response.json();
			})
			.then(data => {
				var option = {
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						textStyle: {
							color: "#0089f3"
						},
						orient: 'vertical',
						x: 'left',
						data: ['设备001', '设备002', '设备003']
					},
					color: ['#f54100', '#3953ed', '#34d5fc'],
					calculable: false,
					series: [
						{
							name: '设备检测异常数量',
							type: 'pie',
							radius: ['50%', '80%'],
							itemStyle: {
								normal: {
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								},
								emphasis: {
									label: {
										show: true,
										position: 'center',
										textStyle: {
											fontSize: '13',
											fontWeight: 'bold',
											color: "#0089f3"
										}
									}
								}
							},
							data: [
								{ value: data.device_001, name: '设备001' },
								{ value: data.device_002, name: '设备002' },
								{ value: data.device_003, name: '设备003' }
							]
						}
					]
				};

				myChart.setOption(option);
				window.onresize = myChart.resize;
			})
			.catch(error => console.error('Error fetching data:', error));
	}

	// 初次加载时调用一次函数获取并更新数据
	fetchDataAndUpdateChart();

	// 如果需要定时更新数据，可以使用以下代码
	setInterval(fetchDataAndUpdateChart, 30000);  // 每分钟更新一次
});


document.addEventListener("DOMContentLoaded", function() {
    var myChart = echarts.init(document.getElementById('con1'));

    function fetchDataAndUpdateChart() {
        fetch('/api/get-chart-series-data/')  // 替换为API 端点
            .then(response => response.json())
            .then(data => {
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid:{
                        x:3,
                        y:3,
                        x2:3,
                        y2:3
                    },
                    color:['#f40e0e','#1586ee'],
                    toolbox: {
                        show : false,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['周一','周二','周三','上周四','上周五','上周六','上周日'],
                            shown:false,
                            splitLine:{show: false},
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            shown:false,
                            splitLine:{show: false}, // 去掉网格线
                            splitArea : {show : true} // 保留网格区域
                        }
                    ],
                    series: [
                        {
                            name:'异常',
                            type:'line',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: data.series[0].data  // 使用后端返回的数据
                        },
                        {
                            name:'正常',
                            type:'line',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: data.series[1].data  // 使用后端返回的数据
                        }
                    ]
                };

                myChart.setOption(option);
                window.onresize = myChart.resize;
            })
            .catch(error => console.error('Error fetching data:', error));
    }

    // 初次加载时调用一次函数获取并更新数据
    fetchDataAndUpdateChart();

    // 如果需要定时更新数据，可以使用以下代码
    setInterval(fetchDataAndUpdateChart, 10000);  // 每30秒更新一次
});



document.addEventListener("DOMContentLoaded", function() {
    var myChart = echarts.init(document.getElementById('left01'));

    function fetchDataAndUpdateChart() {
        fetch('/api/get-chart-data/')
            .then(response => response.json())
            .then(data => {
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        x: '27%',
                        y: '8%',
                        x2: '10%',
                        y2: '25%'
                    },
                    calculable: true,
                    legend: {
                        data: ['总量检测', '正常', '异常'],
                        textStyle: {
                            color: "#0089f3"
                        },
                        orient: 'vertical',
                        x: 'left'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['大前天', '前天', '昨日', '今日'],
                            splitLine: { show: false },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#0089f3'
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            min: 10,
                            max: 800,
                            splitLine: { show: false },
                            axisLabel: {
                                formatter: '{value} ',
                                textStyle: {
                                    color: '#0089f3'
                                }
                            }
                        },
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '正常数量',
                            type: 'line',
                            itemStyle: {
                                normal: { color: '#03a1cb' }
                            },
                            data: data.total_forecast
                        },
                        {
                            name: '异常数量',
                            type: 'bar',
                            stack: '异常数量',
                            barWidth: 20,
                            itemStyle: {
                                normal: { color: '#5ef8fc' }
                            },
                            data: data.accepted_volume
                        },
                        {
                            name: '检测总量',
                            type: 'bar',
                            stack: '检测总量',
                            itemStyle: {
                                normal: { color: '#fcf45e' }
                            },
                            yAxisIndex: 1,
                            data: data.total_volume
                        }
                    ]
                };

                myChart.setOption(option);
                window.onresize = myChart.resize;
            })
            .catch(error => console.error('Error fetching data:', error));
    }

    // 初次加载时调用一次函数获取并更新数据
    fetchDataAndUpdateChart();

    // 如果需要定时更新数据，可以使用以下代码
    setInterval(fetchDataAndUpdateChart, 10000);  // 每分钟更新一次
});

document.addEventListener("DOMContentLoaded", function() {
    function fetchAlertsAndUpdate() {
        fetch('/api/get-alerts/')
            .then(response => response.json())
            .then(data => {
                const alertContainer = document.querySelector(".ul_con");
                alertContainer.innerHTML = ""; // 清空现有内容

                data.forEach(alert => {
                    const alertElement = document.createElement("li");
                    alertElement.innerHTML = `
                        <a href="#">
                            <span style="color: ${alert.severity === '严重' ? 'red' : alert.severity === '一般' ? 'green' : 'deepskyblue'}">${alert.severity}</span>
                            <span>${alert.road}</span>
                            <span>${alert.issue}</span>
                            <span>${alert.time}</span>
                        </a>
                    `;
                    alertContainer.appendChild(alertElement);
                });
            })
            .catch(error => console.error('Error fetching alerts:', error));
    }

    // 初次加载时调用一次函数获取并更新数据
    fetchAlertsAndUpdate();

    // 定期更新数据，每分钟更新一次
    setInterval(fetchAlertsAndUpdate, 10000); // 每分钟更新一次
});

